<template>
	<div class="shuffling">
		<div class="fouce fl">
			<div class="focus">
				<ul class="showimg">
					<template v-for='(sd,index) in shufflingData'>
						<li v-if='shufflingId==index' v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext'>
							<a target="_blank" v-bind:title="sd.title" class="img" v-bind:href="sd.href"><img v-bind:alt="sd.title" v-bind:src="sd.url" /></a>
							<!--<h3><a target="_blank" v-bind:title="sd.title" v-bind:href="sd.href">{{sd.title}}</a></h3>-->
						</li>
					</template>
				</ul>
				<div class='bullet-pagination'>
					<a class="bullet" v-bind:class="{'active': shufflingId==0}" v-on:click='bulletFunOne'></a>
					<a class="bullet" v-bind:class="{'active': shufflingId==1}" v-on:click='bulletFunTwo'></a>
					<a class="bullet" v-bind:class="{'active': shufflingId==2}" v-on:click='bulletFunThree'></a>
					<a class="bullet" v-bind:class="{'active': shufflingId==3}" v-on:click='bulletFunfour'></a>

				</div>

				<div v-show='PreNext' class="preNext pre" v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' v-on:click='preFun'></div>
				<div v-show='PreNext' class="preNext next" v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' v-on:click='nextFun'></div>

			</div>
		</div>
	</div>
</template>

<script>
	export default {

		components: {},
		created() {
			var _this = this;
			clearInterval(timer)
			var timer = setInterval(function() {
				if(_this.shufflingId >= 0 && _this.shufflingId < _this.shufflingData.length - 1) {
					_this.shufflingId = parseInt(_this.shufflingId) + 1;
				} else if(_this.shufflingId == _this.shufflingData.length - 1) {
					_this.shufflingId = 0;
				}

			}, 5000)

		},
		methods: {
			bulletFunOne: function() {
				this.shufflingId = 0;
			},
			bulletFunTwo: function() {
				this.shufflingId = 1;
			},
			bulletFunThree: function() {
				this.shufflingId = 2;
			},
			bulletFunfour: function() {
				this.shufflingId = 3;
			},
			showPreNext: function() {
				this.PreNext = true;
			},
			hiddenPreNext: function() {
				this.PreNext = false;
			},
			preFun: function() {
				var _this = this;
				if(_this.shufflingId > 0 && _this.shufflingId < _this.shufflingData.length) {
					_this.shufflingId = parseInt(_this.shufflingId) - 1;
				} else {
					_this.shufflingId = _this.shufflingData.length - 1
				}
			},
			nextFun: function() {
				var _this = this;
				if(_this.shufflingId >= 0 && _this.shufflingId < _this.shufflingData.length - 1) {
					_this.shufflingId = parseInt(_this.shufflingId) + 1;
				} else {
					_this.shufflingId = 0
				}
			}
		},
		data() {
			return {
				shufflingData: [{
						title: '',
						href: '1',
						url: 'static/one.jpg'

					},
					{
						title: '',
						href: '2',
						url: 'static/tow.jpg'
					},
					{
						title: '',
						href: '3',
						url: 'static/three.jpg'
					},
					{
						title: '',
						href: '4',
						url: 'static/four.jpg'
					}
				],
				shufflingId: 0,
				PreNext: false,
			}
		}

	}
</script>

<style lang="less" rel="stylesheet/less">
	.shuffling{
		width: 100%;
		.fouce {
			position: relative;
			width: 1220px;
			/*overflow: hidden;*/
			margin: 0 auto;
			.focus {
				position: absolute;
				top: 0;
				left: -350px;
				}
				.bullet-pagination {
					position: absolute;
					bottom: 50px;
					width: 100%;
					text-align: center;
					padding-top: 16px;
					clear: both;
					overflow: hidden;
					.bullet {
						display: inline-block;
						background: #fff;
						width: 12px;
						height: 12px;
						border-radius: 6px;
						-webkit-border-radius: 6px;
						margin-right: 5px;
						opacity: 0.8;
						-webkit-transition: opacity 0.8s linear;
						-moz-transition: opacity 0.8s linear;
						-ms-transition: opacity 0.8s linear;
						-o-transition: opacity 0.8s linear;
						transition: opacity 0.8s linear;
					}
					.preNext {
						display: block;
						height: 68px;
						width: 43px;
						position: absolute;
						top: 200px;
						cursor: pointer;
					}
					.pre {
						position: absolute;						
   					    display: inline-block;
						
						height: 68px;
						width: 100%;
						
						background: red;
						opacity: 0.5;
						
					
						background: url(new.png) no-repeat right center;
						background-position: -92px -422px;
						
					}
					.next {
						display: inline-block;
						position: absolute;
						background: url(new.png) no-repeat left center;
						right: 0;
						background-position: -139px -422px;
					}
				}
			}
		}
	
	
	
	.bullet.active {
		background: #007cdb;
		opacity: 1;
		cursor: pointer;
	}
	

	
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	
	a {
		text-decoration: none;
	}
</style>